<section class="instructions">
  <div class="text-center">
    <small>Now we’re going to explore something called:</small>
    <h1>The Command Line</h1>
  </div>

  <p>The command line is a place on your computer where you can type in executable code <i>(You will see in a moment)</i></p>
  <p>After you type them in, you’ll hit <strong>Enter</strong> to run the commands</p>
  <p style="text-align: center; color: rgb(154, 155, 160);">This is where magic happens</p>
  <p>Never used the command line? You may want to pause and take this <%= link_to "free command line tutorial", "https://onemonth.com/courses/command-line-crash-course?utm_source=installrails&utm_campaign=rails&utm_medium=installrails" %>.</p> 
  <hr>

  <ol>
    <li>
      <p>On a Mac, we can find the Terminal by opening Spotlight and type “<strong>Terminal</strong>” <i><br>(the little <i class="icon-search"></i> icon on the top right corner of your Mac)</i></p>
      <div class="text-center"><%= image_tag "mac_steps/spotlight_search_for_terminal.png" %></div>
    </li>

    <li>
      <p>Alternatively, you could look in your “<strong>Applications</strong>” folder
      <br>It’s under “<strong>Applications → Utilities → Terminal</strong>”)</p>
      <div class="text-center"><%= image_tag "mac_steps/applications_utilities_terminal.png" %></div>
    </li>

    <li>
      <p>Once you open it, your Terminal should look something like this <i>(don’t freak out)</i>:</p>
      <div class="text-center"><%= image_tag "mac_steps/terminal.png" %></div>
    </li>

    <div class="row">
      <div class="col-sm-6 note text-center">
        PRO TIP:
        Add Terminal to your Dock; you’ll be using it a lot.
        Click &amp; Hold the Terminal dock icon and select
        “<strong>Options > Keep in Dock</strong>”
      </div>

      <div class="col-sm-6">
        <%= image_tag "sam.png" %>
      </div>
    </div>

    <li>
      <p>Now try typing the following command and hitting “<strong>Enter</strong>”</p>

      <pre><code>$ jot - 1 25</code></pre>

      <div class="row">
        <div class="col-sm-6 col-sm-offset-3 note text-center" id="prompt">
          Ignore the <strong>$</strong> and the <strong>space</strong> at the beginning. It is called a <strong>prompt</strong> and it just means the command is executable
        </div>
      </div>

      <p>It should print out list of all the numbers from <strong>1</strong> to <strong>25</strong></p>
      <pre style="margin-top: 1.4em"><code>$ jot - 1 25
1
2
.
.
.
24
25</code></pre>

      <p style="text-align: center; color: rgb(154, 155, 160);">Try going up to a million. ~__^</p>
    </li>
  </ol>
</section>

<%= render partial: "layouts/step_navigation" %>

<div id="trouble" class="collapse out note">
  <%= render 'layouts/disqus' %>
</div>
